import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:surfaceim/common/widgets/app.dart';
import 'package:surfaceim/pages/community/commentsView.dart';
import 'package:surfaceim/pages/community/controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:get/get.dart';

class CommunityPage extends GetView<CommunityController> {
  AppBar _buildAppBar() {
    return appBar(title: "社区", isBack: true);
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 6,
        child: Scaffold(
            appBar: AppBar(
                title: Text("社区"),
                shape: Border(
                    bottom: BorderSide(
                        color: Colors.black12, style: BorderStyle.solid)),
                bottom: TabBar(
                  isScrollable: true,
                  // indicatorColor: Color.fromRGBO(250, 125, 150, 1),
                  labelStyle: TextStyle(
                      fontSize: 28.sp,
                      color: Color.fromRGBO(250, 125, 150, 1),
                      fontWeight: FontWeight.bold),
                  indicator: UnderlineTabIndicator(
                      borderSide: BorderSide(
                          color: Color.fromRGBO(250, 125, 150, 1), width: 5.h),
                      insets: EdgeInsets.symmetric(vertical: 15.h)),
                  tabs: [
                    Tab(text: "全部"),
                    Tab(text: "OOTD"),
                    Tab(text: "美食"),
                    Tab(text: "萌宠"),
                    Tab(text: "美景"),
                    Tab(text: "仙女")
                  ],
                )),
            body: TabBarView(
              children: [
                _buildCommunityList(),
                Center(
                  child: Text("OOTD"),
                ),
                Center(
                  child: Text("美食"),
                ),
                Center(
                  child: Text("萌宠"),
                ),
                Center(
                  child: Text("美景"),
                ),
                Center(
                  child: Text("仙女"),
                ),
              ],
            )));
  }

  Widget _buildCommunityList() {
    return Obx(() {
      Stack topCard = _buildTopCard();
      Center tags = _buildTags();
      return ListView.builder(
          itemCount: controller.listView.value.length,
          itemBuilder: (BuildContext context, int index) {
            if (index == 0) {
              return Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    topCard,
                    tags,
                    _buildCommunityHead(controller.listView.value[index]),
                    _buildImages(controller.listView.value[index]),
                    _buildContents(
                        controller.listView.value[index], index, context)
                  ],
                ),
              );
            } else {
              return Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildCommunityHead(controller.listView.value[index]),
                    _buildImages(controller.listView.value[index]),
                    _buildContents(
                        controller.listView.value[index], index, context)
                  ],
                ),
              );
            }
          });
    });
  }

  _buildTopCard() {
    return Stack(children: [
      Center(
        child: Container(
            width: 670.w,
            height: 240.h,
            decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/images/meinv.jpeg")),
                borderRadius: BorderRadius.circular(20.h)),
            margin: EdgeInsets.only(bottom: 30.h)),
      ),
      Center(
        child: Container(
            width: 670.w,
            height: 240.h,
            decoration: BoxDecoration(
                color: Color.fromRGBO(0, 0, 0, 0.19),
                borderRadius: BorderRadius.circular(20.h)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "冬日限定礼物",
                  style: TextStyle(
                      fontSize: 42.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
                Container(
                  height: 4.h,
                ),
                Text(
                  "随机掉落小礼物",
                  style: TextStyle(
                      fontSize: 28.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ],
            )),
      ),
    ]);
  }

  _buildTags() {
    List<Widget> listView = List.empty(growable: true);

    for (var i = 0; i < controller.tags.value.length; i++) {
      listView.add(
        Container(
          padding: EdgeInsets.only(
            right: 21.w,
            bottom: 20.h,
          ),
          child: Container(
            padding:
                EdgeInsets.only(left: 14.w, right: 14.w, top: 8.h, bottom: 8.h),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24.w),
              color: Color.fromRGBO(231, 238, 248, 1),
            ),
            child: Text(
              controller.tags.value[i],
              style: TextStyle(
                  color: Color.fromRGBO(110, 125, 162, 1), fontSize: 22.sp),
            ),
          ),
        ),
      );
    }
    return Center(
        child: Container(
      width: 670.w,
      margin: EdgeInsets.only(bottom: 20.h),
      child: Wrap(children: listView),
    ));
  }

  //侯建头像部分
  _buildCommunityHead(CommunityItem communityItem) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Container(
                  margin: EdgeInsets.only(left: 32.w),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(
                          communityItem.headUrl,
                        )),
                    borderRadius: BorderRadius.all(Radius.circular(120.h)),
                  ),
                  width: 70.w,
                  height: 70.w,
                ),
                Container(width: 20.sp),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      communityItem.name,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 26.sp,
                          color: Color.fromRGBO(41, 41, 52, 1)),
                    ),
                    Text(
                      communityItem.introduce,
                      style: TextStyle(color: Color.fromRGBO(193, 193, 193, 1)),
                    )
                  ],
                )
              ],
            ),
            Container(
              padding: EdgeInsets.only(
                  left: 35.w, right: 35.w, top: 7.h, bottom: 7.h),
              margin: EdgeInsets.only(right: 32.w),
              decoration: BoxDecoration(
                  color: Color.fromRGBO(250, 125, 150, 1),
                  borderRadius: BorderRadius.all(Radius.circular(35.w))),
              child: Text(
                "关注",
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 26.sp),
              ),
            )
          ],
        )
      ],
    );
  }

  _buildImages(CommunityItem communityItem) {
    return Container(
      height: 807.h,
      margin: EdgeInsets.only(top: 20.h),
      child: Swiper(
        itemCount: communityItem.images.length,
        itemBuilder: (BuildContext context, int index) {
          return new Image.asset(
            communityItem.images[index],
            fit: BoxFit.cover,
          );
        },
        pagination: new SwiperPagination(),
        // control: new SwiperControl(iconPrevious: null, iconNext: null),
      ),
    );
  }

  _buildContents(CommunityItem communityItem, index, BuildContext context) {
    return // 标签
        Container(
      padding: EdgeInsets.only(left: 54.w, right: 54.w),
      margin: EdgeInsets.only(top: 30.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Wrap(
            children: [
              InkWell(
                child: Container(
                  padding: EdgeInsets.only(
                      left: 14.w, right: 14.w, top: 8.h, bottom: 8.h),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(24.w),
                    color: Color.fromRGBO(231, 238, 248, 1),
                  ),
                  child: Text(
                    communityItem.tags,
                    style: TextStyle(
                        color: Color.fromRGBO(110, 125, 162, 1),
                        fontSize: 22.sp),
                  ),
                ),
                onTap: () {
                  List<CommunityItem> temp =
                      List.empty(growable: true); //需要新建一个对象，否则无法更改
                  for (int i = 0; i < controller.listView.value.length; i++) {
                    if (index == i) {
                      controller.listView.value[i].content = "错误";
                    }
                    temp.add(controller.listView.value[i]);
                  }
                  controller.listView(temp);
                  // controller.listView.value[0].content = "哈哈哈哈哈";
                },
              )
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 36.h),
            child: Text(
              communityItem.content,
              style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 30.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    SvgPicture.asset(
                      "assets/icons/xihuan.svg",
                      width: 42.w,
                      height: 42.h,
                    ),
                    Container(
                      width: 16.w,
                    ),
                    Text(
                      "189",
                      style: TextStyle(
                          fontSize: 26.sp,
                          color: Color.fromRGBO(51, 51, 51, 1)),
                    ),
                    Container(
                      width: 20.w,
                    ),
                    InkWell(
                      child: Row(
                        children: [
                          SvgPicture.asset(
                            "assets/icons/pinglun.svg",
                            width: 42.w,
                            height: 42.h,
                          ),
                          Container(
                            width: 16.w,
                          ),
                          Text(
                            "2020",
                            style: TextStyle(
                                fontSize: 26.sp,
                                color: Color.fromRGBO(51, 51, 51, 1)),
                          ),
                        ],
                      ),
                      onTap: () {
                        showModalBottomSheet(
                            context: context,
                            isScrollControlled:true,
                            builder: (context) {
                              return CommentsView();
                            });
                      },
                    ),
                    Container(
                      width: 20.w,
                    ),
                    SvgPicture.asset(
                      "assets/icons/zhuanfa.svg",
                      width: 34.w,
                      height: 34.h,
                    ),
                    Container(
                      width: 16.w,
                    ),
                    Text(
                      "2020",
                      style: TextStyle(
                          fontSize: 26.sp,
                          color: Color.fromRGBO(51, 51, 51, 1)),
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
